<template>
    <div>
        <table>
            <tr>
                <td></td>
                <td>序号</td>
                <td>商品名称</td>
                <td>购买数量</td>
                <td>商品单价</td>
            </tr>
            <tr v-for="(item,index) in List" :key="index">
                <td>
                    <input type="checkbox" v-model="checkPicked" :value="index" @click="Choose(index)"> 
                </td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>
                    <button @click="reduce(index)">-</button>
                    {{item.count}}
                    <button @click="add(index)">+</button>
                </td>
                <td>{{item.price}}</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" v-model="checkPicked" :value="checkVal" @click="ChooseAll()">
                    全选
                </td>
                <td colspan="2">总价：{{Prices}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
let List=[
    {
        id:1,
        name:"iphone",
        count:1,
        price:4000,
        Picked:false
    },
    {
        id:2,
        name:"ipad",
        count:3,
        price:3000,
        Picked:false
    },
    {
        id:3,
        name:"apple",
        count:3,
        price:2000,
        Picked:false
    },
    {
        id:4,
        name:"banana",
        count:4,
        price:100,
        Picked:false
    },
]
export default {
    name:"Liu",
    data(){
        return{
            checkVal:false,
            checkPicked:[],
            List:List
        }
    },
      mounted:function(){
          for(var i=0;i<this.List.length;i++){
              let temp=this.checkPicked[i]
              this.List[temp].Picked=true
          }
      },
      computed:{
          Prices:function(){
              let total=0
              for(var i=0;i<this.List.length;i++){
                  if(this.List[i].Picked){
                    total+=this.List[i].count*this.List[i].price

                  }
            }
            return total
        }
    },
      methods:{
            reduce:function(index){
                if(this.List[index].count==1){
                    this.List.splice(index,1)
                }
                else{
                    this.List[index].count--
                }
            },
            add:function(index){
                this.List[index].count++
        },
            Choose:function(index){
                let test=this.List[index].Picked
                this.List[index].Picked=!test
            },
            ChooseAll:function(){
                if(!this.checkVal){
                    for(var i=0;i<this.List.length;i++){
                    this.checkPicked[i]=i
                    this.List[i].Picked=true
                }
                this.checkVal=true
            }
                else{
                    this.checkPicked=[]
                    for(var i=0;i<this.List.length;i++){
                        this.List[i].Picked=false
                    }
                    this.checkVal=false
                }
        }

    }
        
}  
</script>

<style scoped>
table{
     border-collapse: collapse;/* 边框合并属性  */
	 width:500px;
}
tr{
     border: 2px solid red;
}
td{
     border: 2px solid red;
};
</style>

